<template>
    <div class="myPublish-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>订单管理</BreadcrumbItem>
        </Breadcrumb>
        <!-- 如果数据为空时两个tab栏分别显示 -->
        <!-- <a-empty style="padding-top:70px;"></a-empty> -->
        <!-- 如果数据不为空时显示 -->
        <div class="myPublish-info">
            <Tabs value="name1">
                <!-- 我卖出的列表 -->
                <TabPane label="我卖出的" name="name1">
                    <!-- <a-empty style="padding-top:70px;"></a-empty> -->
                    <div class="myPublish-list">
                        <div class="myPublish-item">
                            <!-- 用户订单状态 -->
                            <div class="userinfo-order">
                                <div class="userinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="nickName">用户昵称</router-link>
                                </div>
                                <div>
                                    <span class="order-status">订单状态</span>
                                </div>
                            </div>
                            <!-- 商品价格区域 -->
                            <div class="goodsinfo-price">
                                <div class="goodsinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link>
                                </div>
                                <div>
                                    <span>实收款：<span class="price">￥30</span></span>
                                </div>
                            </div>
                            <!-- 联系卖家 -->
                            <div class="info-place">
                                <router-link to="/"><Icon type="ios-chatbubbles" /> 联系买家</router-link>
                                <div class="order-place">
                                    <router-link to="/" class="status">去发货</router-link>
                                    <Dropdown>
                                        <a href="javascript:void(0)">
                                            <Icon type="ios-arrow-down"></Icon>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem>退款详情</DropdownItem>
                                            <DropdownItem>取消订单</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                            </div>
                        </div>
                        <div class="myPublish-item">
                            <!-- 用户订单状态 -->
                            <div class="userinfo-order">
                                <div class="userinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="nickName">用户昵称</router-link>
                                </div>
                                <div>
                                    <span class="order-status">订单状态</span>
                                </div>
                            </div>
                            <!-- 商品价格区域 -->
                            <div class="goodsinfo-price">
                                <div class="goodsinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link>
                                </div>
                                <div>
                                    <span>实收款：<span class="price">￥30</span></span>
                                </div>
                            </div>
                            <!-- 联系卖家 -->
                            <div class="info-place">
                                <router-link to="/"><Icon type="ios-chatbubbles" /> 联系买家</router-link>
                                <div class="order-place">
                                    <router-link to="/" class="status">去发货</router-link>
                                    <Dropdown>
                                        <a href="javascript:void(0)">
                                            <Icon type="ios-arrow-down"></Icon>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem>退款详情</DropdownItem>
                                            <DropdownItem>取消订单</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page-all">
                        <Page :total="5" />
                    </div>
                </TabPane>
                <!-- 我买到的列表 -->
                <TabPane label="我买到的" name="name2">
                    <!-- <a-empty style="padding-top:70px;"></a-empty> -->
                    <div class="myPublish-list">
                        <div class="myPublish-item">
                            <!-- 用户订单状态 -->
                            <div class="userinfo-order">
                                <div class="userinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="nickName">用户昵称</router-link>
                                </div>
                                <div>
                                    <span class="order-status">订单状态</span>
                                </div>
                            </div>
                            <!-- 商品价格区域 -->
                            <div class="goodsinfo-price">
                                <div class="goodsinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link>
                                </div>
                                <div>
                                    <span>实收款：<span class="price">￥30</span></span>
                                </div>
                            </div>
                            <!-- 联系卖家 -->
                            <div class="info-place">
                                <router-link to="/"><Icon type="ios-chatbubbles" /> 联系卖家</router-link>
                                <div class="order-place">
                                    <router-link to="/" class="status">待收货</router-link>
                                    <Dropdown>
                                        <a href="javascript:void(0)">
                                            <Icon type="ios-arrow-down"></Icon>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem>退款详情</DropdownItem>
                                            <DropdownItem>取消订单</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                            </div>
                        </div>
                        <div class="myPublish-item">
                            <!-- 用户订单状态 -->
                            <div class="userinfo-order">
                                <div class="userinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="nickName">用户昵称</router-link>
                                </div>
                                <div>
                                    <span class="order-status">订单状态</span>
                                </div>
                            </div>
                            <!-- 商品价格区域 -->
                            <div class="goodsinfo-price">
                                <div class="goodsinfo">
                                    <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                    <router-link to="/" class="title">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link>
                                </div>
                                <div>
                                    <span>实收款：<span class="price">￥30</span></span>
                                </div>
                            </div>
                            <!-- 联系卖家 -->
                            <div class="info-place">
                                <router-link to="/"><Icon type="ios-chatbubbles" /> 联系卖家</router-link>
                                <div class="order-place">
                                    <router-link to="/" class="status">待收货</router-link>
                                    <Dropdown>
                                        <a href="javascript:void(0)">
                                            <Icon type="ios-arrow-down"></Icon>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem>退款详情</DropdownItem>
                                            <DropdownItem>取消订单</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page-all">
                        <Page :total="5" />
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myOrders',
}
</script>

<style scoped>
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.myPublish-container {
    min-height: 480px;
}
.myPublish-info {
    margin-top: 50px;
}
.myPublish-item {
    margin: 5px 5px 10px 5px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 4px #b8b8b8;
}
.userinfo-order {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.userinfo {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.userinfo a {
    display: block;
}
.userinfo img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
.userinfo .nickName {
    font-size: 12px;
    color: #515a6e;

}
.order-status {
    color: #ef4238;
    font-size: 12px;
}
.goodsinfo-price {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding-bottom: 8px;
}
.goodsinfo {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    max-width: 83%;
}
.goodsinfo a {
    display: block;
    color:#515a6e;
    font-size: 14px;
}
.goodsinfo .title {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.goodsinfo img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.price {
    font-size: 16px;
    color:#ef4238;
}
.info-place {
    width: 100%;
    padding: 5px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.order-place {
    width: 140px;
}
.order-place .status {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 15px;
    border:1px solid #ef4238;
    color:#ef4238;
    margin-right: 10px;
}
.ivu-dropdown-rel a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    color:#515a6e;
    border:1px solid #515a6e;
}
</style>